<template>
	<section>
		<el-col :span="24" style="padding-bottom: 0px;">
			<el-form  class="toolbar" :inline="true" :model="filters">
				<el-form-item label="车型">
					<el-select v-model="oldBrandList.brand" filterable @change="handleSelect(oldBrandList.brand)" placeholder="请选择品牌">
						<el-option v-for="items in oldBrandList" :key="items.id" :value="items.brand"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="searchModel">查询</el-button>
				</el-form-item>
			</el-form>
			<el-form 
				v-loading="listLoading"
				element-loading-text="加加加加加加加加加加加加载中"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
				:inline="true">
				<el-col :class="oldInfoItems.fixStatus == '1'? 'fixed':''" style="height: 38px; margin: 10px" :span="24" v-for="(oldInfoItems,index) in oldInfoList" :key="index"  :id="'a'+index">
					<el-col :span="2" style="text-align: right;"><el-form-item>{{oldInfoItems.brand}}</el-form-item></el-col>
					<el-col :span="2" style="text-align: center;"><el-form-item>{{oldInfoItems.brandType}}</el-form-item></el-col>
					<el-col :span="2" style="text-align: left;"><el-form-item>{{oldInfoItems.model}}</el-form-item></el-col>
					<el-col :span="3">
						<el-select v-model="oldInfoItems.brandName" filterable @change="handleSelectBrand(oldInfoItems.brandName,index)">
							<el-option v-for="fixBrandItems in fixBrandList" :key="fixBrandItems.id" :value="fixBrandItems.name">{{fixBrandItems.name}}</el-option>
						</el-select>
					</el-col>
					<el-col :span="3"  style="text-align: center;">
						<el-form-item>
							{{oldInfoItems.fixBrandName ? oldInfoItems.fixBrandName:'--'}}
						</el-form-item>
					</el-col>
					<el-col :span="3">
						<el-select v-model="oldInfoItems.modelName" filterable @change="handleSelectModel(oldInfoItems.modelName,index)">
							<el-option v-for="fixModelItems in fixModelList" :key="fixModelItems.id" :value="fixModelItems.modelName">{{fixModelItems.modelName}}</el-option>
						</el-select>
					</el-col>
					<el-col :span="3"  style="text-align: center;">
						<el-form-item>
							{{oldInfoItems.fixModelName ? oldInfoItems.fixModelName : '--'}}
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<el-form-item>
							<!-- <el-button type="primary" @click="save(oldInfoItems.id,index)">保存</el-button> -->
							<el-button :class="oldInfoItems.fixStatus == '1'? 'changedBtn':''" type="primary" @click="(e) => save(oldInfoItems.id,index,e)">{{oldInfoItems.fixStatus == '1'? '修改':'保存'}}</el-button>
						</el-form-item>
					</el-col>
				</el-col>
			</el-form>
		</el-col>
		<!--分页-->
		<el-col :span="24">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
	
</template>
<script>

	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getOldBrandList, getOldModelList, getFixBrandList, getFixModelList, getFixStyleList, saveFixStyleInfo } from '../../api/api';

	export default {
		data() {
			return {
				filters: {
					keyword:"",
				},
				form: {
					search_brand: '',
					brand: '',
					model: '',
					style: '',
				},
				listLoading: false,//是否加载等待动画
				total: 0,          //总页数
				page: 1,           //当前页数
				pageSize:20,       //每页显示的条数
				oldBrandList: [],  //旧的车品牌--列表
				oldBrandId: '',    //旧的车品牌--Id
				oldBrand:'',       //旧的车品牌--名
				oldModelId:'',     //旧的车系--Id
				newBrandId:'',     //新的车品牌--Id
				newBrand:'',       //新的车品牌--名
				selectedBrand:'',  //已经选过的车品牌--名
				newModelId:'',     //新的车系--Id
				selectedModel:'',  //已经选过的车系--名
				oldInfoList: [],   //旧的车信息列表
				fixBrandList: [],  //修复后的车品牌--列表
				fixModelList: [],  //修复后的车系--列表
				fixStyleList: [],  //修复后的车型--列表
			}
		},
		methods: {

			//分页组件的handle事件
			handleCurrentChange(val) {
				this.page = val;
				let id = this.oldBrandId
				let postData = {'brandId':id, 'pageNum': this.page, 'pageSize': this.pageSize}

				//获取旧的车系列表
				getOldModelList(postData).then((res) => {
					this.oldInfoList = res.data.data.list
					this.total = res.data.data.totalCount
					this.pageSize = res.data.data.pageSize
				})
			},

			//获取旧品牌列表
			getOldBrandList() {
				getOldBrandList({}).then((res) => {
					//console.log(res.data.data)
					this.oldBrandList = res.data.data
				})
			},

			//获取新品牌列表
			getFixBrandList(brandName){
				getFixBrandList(brandName).then((res) => {
					//console.log(res.data.data)
					this.fixBrandList = res.data.data
				})
			},

			//获取新车系列表
			getFixModelList(brandId){
				getFixModelList(brandId).then((res) => {
					//console.log(res.data.data)
					this.fixModelList = res.data.data
				})
			},

			//保存 修复车型信息
			saveFixStyleInfo(postData){
				saveFixStyleInfo(postData).then((res) => {
					if(res.data.code == '1000'){
						this.$notify.success({
							title: '操作成功',
							message: res.data.msg,
							showClose: false
						});
						this.newBrandId = ''
						this.newModelId = ''
					}else{
						this.$notify.error({
							title: '操作失败',
							message: res.data.msg
						});
						this.newBrandId = ''
						this.newModelId = ''
					}
				})
			},

			//选择车品牌的handle事件
			handleSelect(val){
				this.oldBrandList.map((item,index) => {
					if(item.brand === val){
						this.oldBrandId = this.oldBrandList[index].id
						this.oldBrand = this.oldBrandList[index].brand
					}
				})
			},

			//选择需要修复的车品牌，handle事件
			handleSelectBrand(val,i){
				//console.log('------',this.oldInfoList[i],'----',val)

				this.fixBrandList.map((item,index) => {
					if(item.name === val){
						this.newBrandId = this.fixBrandList[index].id
						this.newBrand = this.fixBrandList[index].name
					}
				})
				let newBrandId = this.newBrandId
				let brandId = { 'brandId': newBrandId }
				this.getFixModelList(brandId)
			},

			//选择需要修复的车型，handle事件
			handleSelectModel(val,i){
				//console.log('------',this.oldInfoList[i],'----',val)
				this.fixModelList.map((item,index) => {
					if(item.modelName === val){
						this.newModelId = this.fixModelList[index].id
					}
				})
			},

			//搜索指定车品牌的修复信息
			searchModel(){
				let id = this.oldBrandId
				//console.log(id)
				if(id.length == 0){
					this.$message({
						message: '请选择查询品牌',
						type: 'warning'
					});
					return
				}

				let postData = {'brandId':id, 'pageNum': this.page, 'pageSize': this.pageSize}
				//获取旧车系列表
				getOldModelList(postData).then((res) => {
					console.log(res)
					this.oldInfoList = res.data.data.list
					this.total = res.data.data.totalCount
					this.pageSize = res.data.data.pageSize

				})
				//console.log(this.oldInfoList)
				let oldBrand = this.oldBrand
				let brandName = { 'brandName': oldBrand }
				this.getFixBrandList(brandName)
			},

			//保存修复信息
			save(val,i,e){
				//console.log(e.target)

				if(!this.newBrandId){
					this.$message({
						message: '请选择品牌',
						type: 'warning'
					});
					return
				}

				if(!this.newModelId){
					this.$message({
						message: '请选择车系',
						type: 'warning'
					});
					return
				}

				let oldModelId = val
				let newModelId = this.newModelId
				//console.log('oldId:',oldModelId)
				//console.log('newId:',newModelId)
				let postData = {'extId': oldModelId, 'modelId':newModelId}

				//调用保存方法
				this.saveFixStyleInfo(postData)
				
				console.log(document.getElementById(`a${i}`))
				let row = document.getElementById(`a${i}`)
				row.getElementsByTagName('button')[0].innerHTML = '修改'
			}
		},

		mounted() {
			
			//获取旧的车品牌列表
			this.getOldBrandList()
		}
	};

</script>

<style scoped>
.fixed{background: #F2F2F2}
.changedBtn{
	margin: 0 auto;
	color: #20A0FF;
	background-color: #FFFFFF;
}
</style>